<template>
	<block class="">
		

		<view class="content" >
			<view class="too b">
				<p :class="zhuantai == 1 ? 'too_a' : 'too_b'" @click="zu">租借订单</p>
				<p :class="zhuantai == 2 ? 'too_a' : 'too_b'" @click="liu" style="margin-left: 45rpx;">我的流程</p>
			</view>
			<view class="" style="height: 120rpx;"></view>
			<view class="" style="height: calc( 100vh - 120rpx ); overflow: scroll;" v-show="zhuantai == 1">
				<view class="dingdan padding-left padding-right b" v-for="(i, index) in data" :key="index">
					<view class="top_a">
						<view class="top_aa">{{ i.title }}</view>
						<view class="top_ab">{{ i.create_time }}</view>
					</view>
					<view class="center_a">
						<image :src="i.cover" mode="aspectFill" @click.stop="preview(i.cover)"></image>
						<view class="xianqing">
							<view class="xianqing_a">{{ i.name }}</view>
							<view class="xianqing_b">{{ i.brief }}</view>
							<view class="xianqing_b">*1</view>
							<view class="xianqing_c">
								<view class="xianqing_ca">
									<p class="shiji">￥{{ i.price }}</p>
									<p class="xuli">￥{{ i.lineation }}</p>
								</view>
								<view class="xianqing_cb">{{ i.stare }}</view>
							</view>
						</view>
					</view>
					<view class="bottm">
						<view class="bottm_a t-cut">订单编号：{{ i.number }}</view>
						<view class="bottm_b">
							<view class="bottm_ba b" @click="cancelOrdr(i.id)" v-show="i.status == 0">取消</view>
							<view class="bottm_bb b" @click="toPay(i.id)" v-show="i.status == 0">去支付</view>
							<view class="bottm_bb b" @click="viewProcess(i.id)" v-show="i.status == 2">查看流程</view>
						</view>
					</view>
				</view>
			</view>

			<view class="" style="height: calc( 100vh - 120rpx ); overflow: scroll;" v-show="zhuantai == 2">
				<view class="me_liucheng b" v-for="(i, index) in data_a" :key="index" @click="addEe(i.id)">
					<view class="liucheng_me padding-left padding-right">
						<view class="liucheng_me_a ">订单编号:{{ i.number }}</view>
						<view class="liucheng_me_b">负责人：{{ i.head }}</view>
					</view>

					<view class="liucheng_center ">
						<view class="renyuan" v-for="(ii, index1) in i.staff" :key="index1">
							<image :src="ii.picture" mode="aspectFill" v-if="ii.picture"></image>
							<image mode="aspectFill" v-else class="bg-gradual-pink"></image>
							<p>{{ ii.position ? ii.position : '...' }}</p>
							<p>{{ ii.nickname ? ii.nickname : '...' }}</p>
						</view>
					</view>

					<view class="liucheng_bott padding-left padding-right">
						<view class="liucheng_bott_a">当前流程:{{ i.process }}</view>
						<!-- <text class="text">大屏租赁</text> -->
						<!-- <view class="liucheng_bott_b b">进行中/已完成</view> -->
					</view>
				</view>
			</view>
		</view>
	</block>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			zhuantai: 2,
			data: [],
			data_a: [],
			content: '东临碣石，以观沧海',
			showTime: false,
			 show: false,
			  id: "",
			  uid:''
		};
	},
	onLoad() {
		
		
		this.rentalOrdr();
		this.myProcess();
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
			animation: {
				duration: 400,
				timingFunc: 'easeIn',
			},
		});
	},
	methods: {
		 
		async cancelOrdr(oid) {
			uni.$showLoading();

			let obj = {
				uid: uni.getStorageSync('uid'),
				oid,
			};
			const res = await this.$u.post('api/shop/cancel_order', obj, {});
			setTimeout(() => {
				uni.$showMsg(res.msg, 1500);
				this.rentalOrdr();
			}, 250);
		},
		preview(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {},
					fail: function(err) {},
				},
			});
		},
		async rentalOrdr() {
			let obj = {
				uid: uni.getStorageSync('uid'),
			};
			const res = await this.$u.post('api/shop/pay_list', obj, {});
			this.data = res.data;
		},
		async myProcess() {
			let obj = {
				uid: uni.getStorageSync('uid'),
			};
			const res = await this.$u.post('api/user/user_process', obj, {});
			console.log('我的流程 :>> ', res);
			this.data_a = res.data;
		},
		zu() {
			this.zhuantai = 1;
		},
		liu() {
			this.zhuantai = 2;
           
		},
		addEe(id) {
			uni.navigateTo({
				url: './Ding/guanli?lc_id=' + id,
			});
		},
		toPay(i) {
			uni.navigateTo({
				url: 'me/dingdan_xq_a?oid=' + i,
			});
		},
	},
};
</script>

<style lang="scss" scoped>

.content {
	width: 100%;
	height: 100%;

	background-color: #f5f8fd;
}
.too {
	z-index: 99;
	position: fixed;
	top: 0;
	width: 100%;
	height: 120rpx;
	line-height: 120rpx;
	display: flex;
	justify-content: center;

	.too_a {
		position: relative;
		width: 150rpx;
		height: 85rpx;
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #ff1a14;
		text-align: center;
		&::after {
			position: absolute;
			bottom: -20rpx;
			left: 50%;
			transform: translateX(-50%);
			content: '';
			width: 70rpx;
			height: 9rpx;
			background-color: #ff1a14;
			border-radius: 30rpx;
		}
	}
	.too_b {
		width: 150rpx;
		height: 120rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
}
.dingdan {
	width: 690rpx;
	margin: auto;

	background-color: #ffffff;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	.top_a {
		width: 100%;
		height: 66rpx;
		border-bottom: 1rpx solid #f5f8fd;
		display: flex;
		justify-content: space-between;
		.top_aa {
			height: 66rpx;
			font-size: 28rpx;
			line-height: 66rpx;
			margin-right: 10rpx;
		}
		.top_ab {
			height: 66rpx;
			font-size: 28rpx;
			line-height: 66rpx;
			margin-right: 10rpx;
		}
	}
	.center_a {
		width: 100%;
		height: 240rpx;
		border-bottom: 1rpx solid #f5f8fd;
		display: flex;
		justify-content: space-around;
		align-items: center;
		image {
			width: 200rpx;
			height: 200rpx;
		}
		.xianqing {
			width: 400rpx;
			height: 200rpx;
			margin-top: 20rpx;
			.xianqing_a {
				width: 400rpx;
				height: 50rpx;
				line-height: 50rpx;
				color: #333333;
				font-size: 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.xianqing_b {
				width: 400rpx;
				height: 50rpx;
				line-height: 50rpx;
				color: #999999;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.xianqing_c {
				width: 100%;
				height: 30rpx;
				display: flex;
				justify-content: space-around;
				.xianqing_ca {
					width: 300rpx;
					display: flex;
					.shiji {
						color: #ff0000;
						font-size: 30rpx;
						height: 30rpx;
						line-height: 30rpx;
					}
					.xuli {
						color: #999999;
						font-size: 24rpx;
						margin-left: 10rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-decoration: underline;
						text-decoration: line-through;
					}
				}
				.xianqing_cb {
					width: 100rpx;
					color: #ff0000;
					font-size: 30rpx;
				}
			}
		}
	}
	.bottm {
		width: 100%;
		height: 96rpx;
		display: flex;
		justify-content: space-around;
		.bottm_a {
			width: 250px;
			height: 96rpx;
			line-height: 96rpx;
			font-size: 24rpx;
			color: #999999;
		}
		.bottm_b {
			width: 250px;
			//height: 96rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
			.bottm_ba {
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border: 1px solid #999999;
				color: #999999;
				border-radius: 10rpx;
				font-size: 24rpx;
			}
			.bottm_bb {
				width: 120rpx;
				height: 50rpx;
				text-align: center;
				background-color: #ff1a14;
				color: #ffffff;
				border-radius: 10rpx;
				font-size: 24rpx;
				line-height: 50rpx;
			}
		}
	}
}
.me_liucheng {
	width: 690rpx;
	margin: auto;
	height: 354rpx;
	background-color: #ffffff;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	.liucheng_me {
		width: 100%;
		height: 66rpx;
		border-bottom: 1rpx solid #f5f8fd;

		display: flex;
		align-items: center;
		justify-content: space-between;
		.liucheng_me_a {
			height: 23rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 30rpx;
		}
		.liucheng_me_b {
			width: 200rpx;
			height: 23rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff1a14;
			line-height: 30rpx;
			text-align: right;
		}
	}
	.liucheng_center {
		width: 690rpx;
		height: 200rpx;
		border-bottom: 1rpx solid #f5f8fd;
		display: flex;

		overflow: scroll;
		white-space: nowrap;

		.renyuan {
			width: 171rpx;
			height: 170rpx;
			margin-top: 18rpx;
			margin-left: 40rpx;
			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
				margin-left: 18rpx;
			}
			p {
				width: 120rpx;
				height: 31rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 14rpx;
				text-align: center;
			}
		}
	}
	.liucheng_bott {
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.text {
			height: 23rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 1;
		}
		.liucheng_bott_a {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff1a14;
			line-height: 73rpx;
			text-align: left;
		}
		.liucheng_bott_b {
			width: 120rpx;
			height: 46rpx;
			line-height: 46rpx;
			background-color: #ff1a14;
			font-size: 24rpx;
			text-align: center;
			color: #ffffff;
			margin-top: 10rpx;
			border-radius: 10rpx;
		}
	}
}
</style>
